<script setup lang="ts">
import {
  CaretTop,
} from '@element-plus/icons-vue'
defineProps(['title', 'value'])
</script>

<template>
  <div class="statistic-card">
    <el-statistic :value="value">
      <template #title>
        <div style="display: inline-flex; align-items: center">
          {{ title }}
        </div>
      </template>
    </el-statistic>
    <!-- <div class="statistic-footer">
      <div class="footer-item">
        <span>较上月</span>
        <span class="green">
          24%
          <el-icon>
            <CaretTop />
          </el-icon>
        </span>
      </div>
    </div> -->
  </div>
</template>

<style lang="css" scoped>
.statistic-card {
  height: 100%;
  padding: 10px;
  border-radius: 4px;
  /* background-color: var(--el-bg-color-overlay); */
  background-image: linear-gradient(45deg, #416ce1 5%, transparent 105%);
}
</style>
